/* eslint-disable jsx-a11y/alt-text */
/* eslint-disable no-undef */
/* eslint-disable jsx-a11y/media-has-caption */
import React, { useState, useEffect, PropsWithChildren } from 'react';
import { Card, Button } from 'antd';
import NavHeader from '@/components/NavHeader';
import { connect } from 'react-redux';
import { RouteComponentProps, StaticContext } from 'react-router';
import { getLesson } from '@/api/home';
import { Lesson, LessonResult } from '@/typings/lesson';
import { CombinedState } from "@/store/reducers";
import actions from '@/store/actions/cart';
import './index.scss';
const { Meta } = Card;
interface Params {
  id: string;
}

const mapStateToProps = (state: CombinedState): CombinedState => state;
type RouteProps = RouteComponentProps<Params, StaticContext, Lesson>;
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof actions;
type Props = PropsWithChildren<RouteProps & StateProps & DispatchProps>;

function Details(props: Props) {
  const [lesson, setLesson] = useState<Lesson>({} as Lesson);
  useEffect(() => {
    (async () => {
      let lesson: Lesson = props.location.state;
      if (!lesson) {
        const id = props.match.params.id;
        const result: LessonResult = await getLesson<LessonResult>(id);
        if (result.success) {
          lesson = result.data;
        }
      }
      setLesson(lesson);
    })();
  }, []);
  const addCartItem = (lesson: Lesson) => {
    // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
    const video: HTMLVideoElement = document.querySelector("#lesson-video");

    const cart: HTMLSpanElement = document.querySelector(
      ".anticon.anticon-shopping-cart"
    );
    const clonedVideo: HTMLVideoElement = video.cloneNode(
      true
    ) as HTMLVideoElement;
    const videoWith = video.offsetWidth;
    const videoHeight = video.offsetHeight;
    const cartWith = cart.offsetWidth;
    const cartHeight = cart.offsetHeight;
    const videoLeft = video.getBoundingClientRect().left;
    const videoTop = video.getBoundingClientRect().top;
    const cartRight = cart.getBoundingClientRect().right;
    const cartBottom = cart.getBoundingClientRect().bottom;
    clonedVideo.style.cssText = `
                z-index: 1000;
                opacity:0.8;
                position:fixed;
                width:${videoWith}px;
                height:${videoHeight}px;
                top:${videoTop}px;
                left:${videoLeft}px;
                transition: all 2s ease-in-out;
              `;
    document.body.appendChild(clonedVideo);
    setTimeout(function () {
      clonedVideo.style.left = `${cartRight - cartWith / 2}px`;
      clonedVideo.style.top = `${cartBottom - cartHeight / 2}px`;
      clonedVideo.style.width = `0px`;
      clonedVideo.style.height = `0px`;
      clonedVideo.style.opacity = "50";
    }, 0);
    props.addCartItem(lesson);
  };
  return (
    <>
      <NavHeader history={props.history}>课程详情</NavHeader>
      <Card
        hoverable
        style={{ width: "100%" }}
        cover={<img id="lesson-video" src={lesson.poster} />}
      >
        <Meta
          title={lesson.title}
          description={(
            <>
              <p>
                价格: ¥
                {lesson.price}
                元
              </p>
              <p>
                <Button
                  className="add-cart"
                  onClick={() => addCartItem(lesson)}
                >
                  加入购物车
                </Button>
              </p>
            </>
          )}
        />
      </Card>
    </>
  );
}

export default connect(mapStateToProps, actions)(Details);
